<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/">

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# donut-rush: http://ogp.me/ns/fb/donut-rush#">
    <meta property="fb:app_id" content="234944199916063" /> 
    <meta property="og:type" content="donut-rush:donut" />
    <meta property="og:title" content="Donut" /> 
    <meta property="og:image" content="http://donutrush.appspot.com/images/icon.gif" /> 
    <meta property="og:description" content="Jelly Donut" />
    <meta property="og:url" content="http://donutrush.appspot.com">
    
     

        <link rel="stylesheet" type="text/css" href="style/style.css"/>
        <script type="text/javascript" src="Jquery/jquery-1.7.1.js"></script>
        <script type="text/javascript" src="Jquery/jquery.simplemodal-1.4.2.js"></script>
        <script type="text/javascript" src="Spider.js"></script>
        <script src="http://connect.facebook.net/en_US/all.js"></script>
        <script type="text/javascript" src="json2.js"></script>
        
        <title>Oded Oren, Oshri Shmuel, Gilad Einbar: Donut Rush!</title>
        
  <script>      



  
        

        
</script>
</head>
<body>




        





		<div id="fb-root"></div>
	<script>
	window.fbAsyncInit = function() {
	    FB.init({
	      	appId      : '234944199916063',
	      	status     : true, 
	      	cookie     : true, 
	     	 xfbml      : true  
	    });
	  
	    FB.getLoginStatus(function(response) {
	    	
			if (response.status === 'connected') {

				login();
				
				
				
			} else if (response.status === 'not_authorized') {
				$("#fbLogin").css('display','none');
				FB.login(function(response){},{scope: 'email,user_birthday,status_update,publish_stream,publish_actions'});
			} else {
				//TODO: show facebook login button.	
				
				$("#fbLogin").css('display','block');
			}
		});


		
		FB.Event.subscribe('auth.login', function(response) {
   			login();
		});

		/*
		FB.Event.subscribe('auth.logout', function(response) {
  			 logout();
		});
		*/


	
		/*FB.getLoginStatus(function(response) {
 			if (response.session) {
   			   	greet();
  			}
		});*/
	};
	
	(function(d){
	     var js, id = 'facebook-jssdk';
	     if (d.getElementById(id)) {return;}
	     js = d.createElement('script'); 
	     js.id = id; 
	     js.async = true;
	     js.src = "//connect.facebook.net/en_US/all.js&xfbml=1";
	     d.getElementsByTagName('head')[0].appendChild(js);
	   }(document));


	function login(response){
   		FB.api('/me', function(response) {

   			FACEBOOK_RESPONSE = response;
   			LOGGED_IN_FB = true;
   			$("#fbLogin").css('display','none');
   			$("#login").css('display','none');
   			if(alreadyRegistered()){
   				$("#FBRegisterButton").css('display','none');
   				
   			}
   		//$("#userinfo").html('<img src="https://graph.facebook.com/' + response.id + '/picture">' + response.name);
	    	
   		});
   		}
   		
   		
	function logout(){
		LOGGED_IN_FB = false;
		FACEBOOK_RESPONSE = -1;
	}
	function greet(){
   		FB.api('/me', function(response) {
   			LOGGED_IN_FB = true;
   			FACEBOOK_RESPONSE = response;
   		});
	}

</script>


<div id="fbLogin">
<fb:login-button autologoutlink='false' scope='email,user_birthday,status_update,publish_stream,publish_actions'></fb:login-button>
</div>

<div id="fbLike">
<fb:like href="http://apps.facebook.com/donut-rush/" send="true" width="450" show_faces="true"></fb:like> 
</div>





<div id="fbregisterForm">	
<fb:registration 
redirect-uri="http://donutrush.appspot.com/FacebookRegister.do" 
    fields="[
    	{'name':'name'}, 
        {'name':'email'},
        {'name':'password'},
        {'name':'foo','description':'Type foo','type':'hidden'}
    ]"
	onvalidate="validate_async"
	width="400%"
	height="300"
	fb_only='true'
	scrolling="auto"
	frameborder="no"
	style="border:none"
	allowTransparency="true"
       >
 </fb:registration> 
 <p id="fbRegformError" style="background-color:red; font-size:1em; color:white;"></p>
</div>



<div id="registerForm">	
<fb:registration 


redirect-uri="http://donutrush.appspot.com/FacebookRegister.do" 

 fields='[
   {"name":"name", "description":"Type name", "type":"text"},
   {"name":"foo","description":"Type foo","type":"hidden"},
   {"name":"email", "description":"Type email", "type":"text"},
   {"name":"password"}
   ]' 
 onvalidate="validate_async"
 width="400%"
 height="300"></fb:registration>
 <p id="RegformConfirmationMsg" style="background-color:blue; font-size:1.5em; color:white;">A mail will be sent for you to confirm your registration</p> 
 <p id="RegformError" style="background-color:red; font-size:1.5em; color:white;"></p>
  
</div>



<script> 


/*here we validate user registration in terms of legality of name email*/

function validate_async(form) {
	errors = {};
    
    if(LOGGED_IN_FB){
    	dat =  {
    		    name: form.name,
    		    email: form.email    
            }
    }
    else{
		dat =  {
		    name: form.name,
		    email: form.email    
        }
    }

    var request = new XMLHttpRequest();
    request.open("POST", "/ConfirmRegFormServlet.do", false); //the false indicates we want this to be sync, meaning we wait for an answer from the server
	request.onreadystatechange = function(){  //this is used to listen for changes in the request's status and act accordingly
	
		var JSONdataRT = eval("(" + request.responseText + ")");//the way to get the json from the string sent by the servlet
		var Err = JSONdataRT["Error"];
		
	       if(Err == "none"){
	    	   
	    	   $("#fbRegformError").html("");
	    	   $("#RegformError").html("");
	       }

	       if(Err == "bad"){

		       if(!LOGGED_IN_FB){
	    	errors.email = "bad";
	    	errors.name = "bad";
			$("#RegformError").html("Either chosen name or e-mail are already registered, Please change the details for the registration to proceed");//already exists user with these details error
			}
		       else{
		    	     errors.foo = "bad";
					$("#fbRegformError").html("Either chosen name or e-mail are already registered");//already exists user with these details error
		       }
	       }
	      
		  	 
		}
	request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//not important
    request.send(JSON.stringify(dat));//sending the httprequest with the JSON object in the body 

    return errors;
    }


 
</script>

    
        
        
        <div id="frame">
             
                <h1><img src="images/headline.gif"/></h1>
                
                <div id="register"><a id="FBRegisterButton" href="#">Register</a></div>
                
                <div id="login"><a id="loginHref" href="#">log in</a></div>
                 
                <p id="board">
                        <canvas id="arena" width="600" height="450" style="" class="arenaflow">
                        
                        </canvas>
                        <img src="images/donuts.jpg" id="sideImage"/>
                </p>
              
              <div class="fb-comments" data-href="http://donutrush.appspot.com" data-num-posts="2" data-width="750"></div>  
              
              </br></br>
               <div class="fb-live-stream" data-event-app-id="234944199916063" data-width="750" data-height="200" data-always-post-to-friends="false"></div>
        </div>
        
        
        
        
        
        
        
        
        <div class="forms">
        	<form id="ScoreSubmitForm" method="POST"/>
        				<label id="regFormText"></label>
                        	</br></br>
                        <label id="uname">
                        		<br/><br/>
                                User Name: <input type="text" name="nick" /><br/>
                                <input type="hidden" name="email" />
                                <input type="hidden" name="password" />
                                <input type="hidden" name="password2" />
                                </label>
                                <input type="button" value="Submit" id="registerFormSubmit"/>
                                <input type="button" value="No Thanks" id="noThanks"/>
         						</br></br></br></br>
         						<div id="scoreReport"></div>                       
         						<div id="formError"></div>
         
         	</form>
         
         </div>
         
         
         <div>
         	<form id="LoginForm" method="POST"/>
                        Sign up to play using your User</br></br>
                                User Name: <input type="text" name="nick" /><br/>
                                E-mail: <input type="text" name="email" /><br/>
                                Password: <input type="password" name="password" /><br/>
                                <input type="button" value="Submit" id="loginFormSubmit"/>
                                <input type="button" value="Forget it" id="IdontWantToLogin"/>
                                
         						<div id="loginFormError"></div>
        
        	</form>
        
        	<div id="confirmationMessage" class="forms">
        		Registration successful, please log in to your</br>
        		mail in order to confirm the registration</br></br>
        		<input type="button" value="OK, I will check my mail" id="confirmationOK"/>
        	</div>
        
         </div>
         
          
         
       
        


</body>


</html>